<template>
	<view class="tracks">
		<view
			class="track"
			v-for="(track,index) in tracks"
			:key="index"
			@click="$emit('click',track)"
		>
			<!-- 辅助点 -->
			<view class="dot" />
			<!-- 时间 -->
			<view class="time">{{track.date}}</view>
			<!-- 项目名 -->
			<view class="track-name">{{track.trackName}}</view>
			<!-- 描述 -->
			<view class="result">{{track.result}}</view>
		</view>
	</view>
</template>

<script>
export default {
  name: 'time-tracks',
  props: {
    tracks: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style lang="scss" scoped>
.tracks {
  max-height: 220px;
  padding-top: 20px;
  overflow: auto;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }

  .track {
    display: flex;
    align-items: center;
    height: 42px;
    font-size: $sSmall;

    .time {
      flex: 0 0 52px;
      margin: 0 5px;
      font-size: $sMini;
      color: $gray1;
    }

    .dot {
      position: relative;
      flex-shrink: 0;
      width: 10px;
      height: 10px;
      background-color: $primary2;
      filter: brightness(110%);
      border-radius: 50%;

      &::after {
        position: absolute;
        top: 16px;
        left: 50%;
        height: 20px;
        content: '';
        border-left: 1px dashed $gray2;
        transform: translateX(-50%);
      }
    }

    .track-name {
      flex: 0 0 60%;
      margin: 0 10px;
      font-weight: bold;
      color: $primary2;
    }

    .result {
      flex: 0 0 auto;
      padding-right: 5px;
      white-space: nowrap;
    }

    // 第一个track的上方加虚线
    &:first-of-type .dot::before {
      position: absolute;
      top: -25px;
      left: 50%;
      height: 20px;
      content: '';
      border-left: 1px dashed $gray2;
      transform: translateX(-50%);
    }
  }
}
</style>
